<template>
	<view class="content">
		<view class="search-kw-box" v-show="show" :style="'height:' + wHeight + 'px'">
			<view class="kw-box comm-list">
				<view class="item-box" 
					v-for="(item,index) in list" 
					:key="index" @click="doSearch(item)"
					:class="selectIdx == index ? 'selected' : ''">
					<rich-text :nodes="html(item.title,item.num)"></rich-text>
					<view class="arrow-box">
						<text class="icon-font search-icon">&#xe600;</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import eventCtrl from "../../js/event/EventCtrl.js";
	export default {
		//isCat：是否是分类搜索
		data() {
			return {
				list:[],
				state:0,
				keyword:"",
				show:false,
				wHeight : uni.getSystemInfoSync().windowHeight - 110,
				listType:0, //0,
				selectIdx:-1,
			};
		},
		
		methods:{
			html(content,num) {
				if(this.keys===''){ //关键字
					return content;
				}
				if(num) //分类
				{
					content = content + " (" + num + ")"; 
					return content;
				}
				
				//关键字改变颜色高亮	
				let reg = new RegExp(this.keyword, "gm");
				let color = '#3388ff';
				let replace = '<span style="color:' + color + ';">'+ this.keyword +'</span>';
				let htmlStr = content.replace(reg, replace);
				return htmlStr;
			},
			
			
			getSelectedItem()
			{
				let item = null;
				if(this.selectIdx == -1)return item;
				item = this.list[this.selectIdx];
				return item;
			},
			
			setShowValue(value)
			{
				console.log("setShowValue（）：value=",value);
				this.show = value;
				this.selectIdx = -1;
				if(value)
					this.onKeyDownEvent();
				else
					this.remveKeyDownEvent();
			},
			
			setKeyWord(kw)
			{
				this.keyword = kw;
			},
			
			setListData(data,listType=0)
			{
				console.log("setListData():",data,listType);
				this.list = data;
				this.listType = listType;
				let show = this.list.length > 0;
				this.setShowValue(show);
			},
			
			doSearch(item)
			{
				this.setShowValue(false);
				this.$emit("doSearch",item,this.listType);
			},
			
			onChangeSize(res)
			{
				this.wHeight = uni.getSystemInfoSync().windowHeight - 110;
			},
			
			onKeyDownEvent()
			{
				console.log("注册事件！！！");
				document.addEventListener('keydown', this.keyboard);
			},
			
			remveKeyDownEvent()
			{
				console.log("删除事件！！！");
				document.removeEventListener('keydown',this.keyboard);
			},
			
			keyboard(event)
			{
				// console.log("event===:",event);
				if(event.keyCode == 40)
				{
					this.addSelectIdx();
					let item = this.list[this.selectIdx];
					if(item)
						this.$emit("setTitleValue",item);
				}
				else if(event.keyCode == 38)
				{
					this.subSelectIdx();
					let item = this.list[this.selectIdx];
					if(item)
						this.$emit("setTitleValue",item);
						
				}
				else if(event.keyCode == 13)
				{
					if(this.selectIdx == -1)return;
					let item = this.list[this.selectIdx];
					if(item)
						this.doSearch(item);
				}
			},
			
			addSelectIdx()
			{
				console.log("addSelectIdx().this.selectidx==:",this.selectIdx);
				let max = this.list.length - 1;
				if(this.selectIdx >= max)return false;
				this.selectIdx ++;
				return true;
			},
			
			subSelectIdx()
			{
				console.log("subSelectIdx().this.selectidx==:",this.selectIdx);
				if(this.selectIdx <= 0)return false;
				this.selectIdx --;
			},
			
		},
		
		mounted() {
			uni.onWindowResize(function(res){
				uni.$emit("onWinResize",res);
			});
			uni.$on("onWinResize",this.onChangeSize);
			//this.onKeyDownEvent();
		}
	}
</script>

<style lang="scss">

.search-kw-box
{
	// top: 54px;
	background-color: #fff;
	// height: calc(100% - 200px);
	// max-height: 800px;
	// height: 700px;//calc(100% - 100px);
	
	.kw-box
	{
		height: 100%;
		// width: 100%;
		// height: 500px;
		.item-box
		{
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px #ECECEC solid;
			background: #FFF;
			font-size: 14px;
			cursor: pointer;
		}
		.item-box:hover
		{
			background-color: #ddd;
		}
		.selected
		{
			background-color: #ddd;
		}
	}
	
	
	
}
</style>
